<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title data-lang="RoomMessage">Room Message</title>
  <link rel="icon" href="../../../../favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="../../../assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="../../../assets/css/style.css">
  <link rel="stylesheet" href="./index.css">
  <script src="../../../assets/js/express_sdk/ZegoExpressWebRTC.js"></script>
</head>

<body class="fix-sidebar card-no-border">
  <div class="preloader">
    <svg class="circular" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
    </svg>
  </div>

  <div class="container main-wrapper">
    <!-- <div class="row"> -->

    <div class="page-wrapper">
      <div class="container-fluid">

        <div class="row">
          <div class="col-12 login-wrapper">
            <h6  data-lang="Preconditions">前置条件</h6>
            <div class="login-desc" data-lang="PreconditionsDesc">
              体验该功能，需要模拟一个用户（UserID）登陆到对应的房间（RoomID）中，并且有权限（Token）时才可以登陆成功。
            </div>
            <div class="form-wrap font-14 row">
              <div class="form-item col-12 col-lg-4">
                <span>RoomID</span>
                <div class="icon-question">?
                  <div class="pop-box" data-lang="RoomIDDesc">Tooltip text</div>
                </div>
                <input type="text" id="RoomID" />
              </div>
              <div class="form-item col-12 col-lg-4">
                <span>UserID</span>
                <div class="icon-question">?
                  <div class="pop-box">
                    <span data-lang="UserIDDesc"></span>
                  </div>
                </div>
                <input type="text" id="UserID" />
              </div>
              <div class="form-item col-12 col-lg-4">
                <span>Token</span>
                <div class="icon-question">?
                  <div class="pop-box">
                    <span data-lang="TokenDesc"></span>
                    <a href="https://console.zego.im" data-lang="ApplyToken" target="_blank"></a>
                  </div>
                </div>
                <input type="text" class="w-70" id="Token" />
              </div>
            </div>
            <button id="LoginRoom" class="play-pause-button" title="loginRoom()" style="width: 120px;">
              <div class="success-svg m-r-5" id="loginSuccessSvg" style="display: none;">
                <svg class="ft-green-tick" xmlns="http://www.w3.org/2000/svg" height="15" width="15" viewBox="0 0 48 48"
                  aria-hidden="true">
                  <circle class="circle" fill="#5bb543" cx="24" cy="24" r="22" />
                  <path class="tick" fill="none" stroke="#FFF" stroke-width="6" stroke-linecap="round"
                    stroke-linejoin="round" stroke-miterlimit="10" d="M14 27l5.917 4.917L34 17" />
                </svg>
              </div>
              Login Room
            </button>
          </div>
        </div>
        <div class="row">
          <div class="col-12 col-lg-6 preview-wrapper">
            <div class="preview-roomInfo">
              RoomID:&nbsp;<div id="roomInfo-id" class="m-r-10"></div>
              RoomState:&nbsp;<div id="roomInfo-state">
                <div class="success-svg" id="roomStateSuccessSvg" style="display: none;">
                  <svg class="ft-green-tick" xmlns="http://www.w3.org/2000/svg" height="10" width="10"
                    viewBox="0 0 48 48" aria-hidden="true">
                    <circle class="circle" fill="#5bb543" cx="24" cy="24" r="22" />
                  </svg>
                </div>
                <div class="error-svg" id="roomStateErrorSvg" style="display: inline-block;">
                  <svg class="ft-green-tick" xmlns="http://www.w3.org/2000/svg" height="10" width="10"
                    viewBox="0 0 48 48" aria-hidden="true">
                    <circle class="circle" fill="#5bb543" cx="24" cy="24" r="22" />
                  </svg>
                </div>
              </div>
            </div>
            <div class="row" id="videoList">
              <div class="preview-pushlishInfo col-lg-12 col-6">
                <div class="pushlishInfo-title">
                  <span data-lang="Preview">Preview</span>
                </div>
                <div class="preview-content">
                  <div class="preview-action">
                    <div class="preview-info">
                      <div>Resolution: <span id="publishResolution"></span></div>
                      <div>Video Send Bitrate: <span id="sendBitrate"></span></div>
                      <div>Video Send FPS: <span id="sendFPS"></span></div>
                      <div>Packet Loss: <span id="sendPacket"></span></div>
                    </div>
                  </div>
                  <div id="localVideo"></div>
                </div>
              </div>
              <div class="preview-playInfo col-lg-12 col-6 m-t-10">
                <div class="pushlishInfo-title">
                  <span data-lang="PlayStream">Play Stream</span>
                </div>
                <div class="preview-content">
                  <div class="preview-action">
                    <div class="preview-info">
                      <div>Resolution: <span id="playResolution"></span></div>
                      <div>Video Send Bitrate: <span id="receiveBitrate"></span></div>
                      <div>Video Send FPS: <span id="receiveFPS"></span></div>
                      <div>Packet Loss: <span id="receivePacket"></span></div>
                    </div>

                  </div>
                  <video controls id="playVideo" autoplay playsinline></video>
                  <div id="remoteVideo"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 col-lg-6 action-wrapper">
            <div class="action-step">
              <div class="action-content">
                <div class="action-room font-14 font-bold">
                  <div class="m-t-10 m-b-5">
                    Publish StreamID <input class="m-l-10" type="text" id="PublishID" />
                    <div class="p-t-10 p-b-10">
                      <button id="startPublishing" class="configBtn play-pause-button"
                        title="createStream()/ startPublishingStream()">Start Publishing</button>
                    </div>
                  </div>
                  <div>
                    Playing StreamID <input class="m-l-10" type="text" id="PlayID" />
                    <div class="p-t-10 p-b-10">
                      <button id="startPlaying" class="configBtn play-pause-button" title="startPlayingStream()">Start
                        Playing</button>
                    </div>
                  </div>
                </div>
                <div class="action-item">
                  <div class="font-14 font-bold b-b m-t-15">
                    <span data-lang="BroadcastMessageReceived">BroadcastMessage Received</span>
                    <div class="font-12 font-medium m-t-5" id="BroadcastMessageReceived"></div>
                  </div>
                  <div class="font-14 font-bold m-t-10">
                    <span data-lang="SendBroadcastMessage">Send BroadcastMessage</span>
                    <input type="text" id="BroadcastMessage" placeholder="1024 bytes max" />
                    <button type="button" id="BroadcastMessageBtn" class="btn-info btn cuBtn"
                      title="sendBroadcastMessage()">send</button>
                  </div>
                </div>
                <div class="action-item">
                  <div class="font-14 font-bold b-b m-t-10">
                    <span data-lang="BarrageMessageReceived">BarrageMessage Received</span>
                    <div class="font-12 font-medium m-t-5" id="BarrageMessageReceived"></div>
                  </div>
                  <div class="font-14 font-bold m-t-15">
                    <span data-lang="SendBarrageMessage">Send BarrageMessage</span>
                    <input type="text" id="BarrageMessage" placeholder="1024 bytes max" />
                    <button id="BarrageMessageBtn" type="button" class="btn-info btn cuBtn"
                      title="sendBarrageMessage()">send</button>
                  </div>
                </div>
                <div class="action-item">
                  <div class="font-14 font-bold b-b m-t-10">
                    <span data-lang="CustomCommandReceived">CustomCommand Received</span>
                    <div class="font-12 font-medium m-t-5" id="CustomCommandReceived"></div>
                  </div>
                  <div class="font-14 font-bold m-t-15">
                    <div class="m-b-5" data-lang="SendCustomCommand">Send CustomCommand</div>
                    <input type="text" id="CustomCommand" placeholder="1024 bytes max" />
                    <input type="text" id="CustomCommandUserId" placeholder="UserID" />
                    <button id="CustomCommandBtn" type="button" class="btn-info btn cuBtn"
                      title="sendCustomCommand()">send</button>
                  </div>
                </div>
                <div class="action-item">
                  <div class="font-14 font-bold b-b m-t-10">
                    <span data-lang="RoomExtraInfo">RoomExtraInfo</span>
                    <div class="font-12 font-medium m-t-5" id="RoomExtraInfo"></div>
                  </div>
                  <div class="font-14 font-bold m-t-10">
                    <div class="m-b-5" data-lang="SetRoomExtraInfo">Set RoomExtraInfo</div>
                    <input type="text" id="RoomExtraInfoKey" placeholder="info Key 10 bytes max" />
                    <input type="text" id="RoomExtraInfoValue" placeholder="info Value 128 bytes max" />
                    <button id="RoomExtraInfoBtn" type="button" class="btn-info btn cuBtn"
                      title="setRoomExtraInfo()">set</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div id="logger">
          </div>
        </div>
      </div>
      <ul class="goToDoc">
        <li>
          <span data-lang="HelpDocsVideoCodec"> Web 端视频编码默认使用 VP8。如果需要体验和其他端互通或者转推 CDN 功能，请在调试与配置页面修改为 H.264。</span>
          &nbsp;
          <a href="../../DebugAndConfig/LogAndVersionAndDebug/index.html" data-lang="HelpSettingsPage" target="_blank">
            点击修改 </a>
        </li>
        <li>
          <span data-lang="MoreDocs">更多文档，请跳转至即构 </span> &nbsp;
          <a href="https://doc-zh.zego.im/article/1062" data-lang="HelpDocs" target="_blank"> 帮助文档 </a>
        </li>
      </ul>
    </div>
    <!-- </div> -->
  </div>

  <script src="../../../assets/js/left-menu.js"></script>
  <script src="../../../assets/js/jquery.min.js"></script>
  <script src="../../../assets/js/jquery.i18n.properties.min.js"></script>
  <script src="../../../assets/js/metisMenu.min.js"></script>
  <script src="../../../assets/js/jquery.slimscroll.min.js"></script>
  <script src="../../../assets/js/bootstrap.min.js"></script>
  <script src="../../../assets/js/vconsole.min.js"></script>
  <script src="../../../assets/js/custom.js"></script>
  <script src="../../../KeyCenter.js"></script>
  <script src="index.js"></script>
</body>

</html>